<template>
  <div id="Sales">
      <div class="address">
        <h3>商品管理 > 销售</h3>
      </div>
      <div class="show-sales"> 
        <el-scrollbar style="height: 100%;"> <!-- 滚动条 -->
          <el-table
            class="room-type-table"
            ref="multipleTable TABLEMINWIDH"
            :data="orderSales"
            tooltip-effect="dark"
            style="width: 100%;font-size: 1.5rem;">
            <!-- 选择框 -->
            <el-table-column
              type="selection"
              min-width="10%">
            </el-table-column>
            <!-- 订单号 -->
            <el-table-column
              label="订单号"
              prop="osin"
              header-align="center"
              align="center"
              min-width="10%">
            </el-table-column>
            <!-- 商品名 + 价格 -->
            <el-table-column
              label="商品"
              header-align="center"
              align="center"
              class="test"
              min-width="20%">
              <template slot-scope="scope">
                <span>{{scope.row.goodTitle}}</span>
                <span class="money">
                  <i class="hotel-management-icon icon-renminbi1688"></i>
                  <span class="price">{{scope.row.goodPrice}}</span> 
                </span>
              </template>
            </el-table-column>
            <!-- 数量 -->
            <el-table-column
              label="数量"
              prop="amount"
              header-align="center"
              align="center"
              min-width="10%">
            </el-table-column>
            <!-- 顾客 -->
            <el-table-column
              label="顾客"
              header-align="center"
              align="center"
              min-width="27%">
              <template slot-scope="scope">
                <span>{{scope.row.customerName}} : {{scope.row.customerPhone}}</span>
              </template>
            </el-table-column>
            <!-- 购买时间 -->
            <el-table-column
              label="购买时间"
              header-align="center"
              align="center"
              min-width="25%">
              <template slot-scope="scope">
                <span>{{timeFormatter(scope.row.orderTime)}}</span>
              </template>
            </el-table-column>
            <!-- 总价 -->
            <el-table-column
              label="总价"
              header-align="center"
              align="center"
              min-width="10%"
              prop="totalPrice"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="money">
                  <i class="hotel-management-icon icon-renminbi1688"></i>
                  <span class="price">{{scope.row.totalPrice}}</span> 
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar><!-- /滚动条 -->
      </div>
  </div>
</template>

<script>
import { showMessage } from '@/utils/utils'
import { loadingMixin } from '@/utils/mixins/loading'
import { timeFormatter } from '@/utils/utils'
import { getAllSaleOrder } from '@/api/api'
export default {
  mixins: [ loadingMixin ],
  name: 'Sales',
  data() {
    return {
      orderSales: []
    }
  },
  methods: {
    timeFormatter,
    async load() {
      await Promise.resolve(getAllSaleOrder().then(response => {
        this.orderSales = response.data.reverse()
      })).catch(error =>  showMessage(this, '获取所有商品订单失败！', 'error'))
    }
  },
}
</script>

<style lang="less" scope>
.address{
  position: relative;
  color: #aa97b0;
  top: -20px;
}
.money{
    display: inline-flex;
    align-items: center;
    color: red;
    position: relative;
    top: -3px;
    margin-left: 5px;
    // .price{
    //   position: relative;
    //   top: -1px;
    // }
  }
</style>